<template>
    <div id="myhead">
        <div class="top">
            <van-icon name="gift-o" />
            <input type="text" placeholder="扶贫商城">
            <van-icon name="service-o" />
            <van-icon name="peer-pay" />
        </div>

        <div class="content">
            <h3>下午好</h3>
            <p>今年迎气始,昨夜伴春回</p>
        </div>

        <div class="account">
            <van-grid>
            <van-grid-item icon="photo-o" text="我的账户" />
            <van-grid-item icon="photo-o" text="转账" />
            <van-grid-item icon="photo-o" text="明细" />
            <van-grid-item icon="photo-o" text="扫一扫" />
            </van-grid>
        </div>
    </div>
</template>

<script>
export default {
    name: 'myhead',
    data() {
        return {

        };
    },
    created() {
    },
    methods: {

    },
    //组件挂载
    components: {},
    //计算属性
    computed: {},
    //过滤器
    filters: {},
};
</script>

<style lang="scss" scoped>
#myhead{
    font-size: .5rem;
    width:100%;
    height: 4.5rem;
    background-color: aqua;
    
    .top{
        display: flex;
        justify-content: space-around;
        align-items: center;
        width: 100%;
        color: #fff;
        height: 1rem;
        background-color: rgba($color: #000000, $alpha: .0);
         input{
            width: 65%;
            height: 46%;
            border: none;
            outline: none;
            box-sizing: border-box;
            padding-left: .2rem;
            font-size: .28rem;
            border-radius: .6rem;
        }
    }
    .content{
        width: 100%;
        height: 1.4rem;
        margin-top: .2rem;
        padding-left: .4rem;
        color: #fff;
        h3{
            font-size: .4rem;
            margin: .2rem 0;
        }
        p{
            font-size: .34rem;
        }
    }
    .account{


    }
   
}
</style>
